<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .pic {
        width: 950px;
        height: 460px;
        position: absolute;
        left: 300px;
        top: 100px;
      }
      .picright {
        float: left;
        position: relative;
        width: 460px;
        height: 460px;
      }
      .picright img {
        width: 100%;
        height: 100%;
      }
      .picright .cover {
        position: absolute;
        top: 0;
        left: 0;
        height: 270px;
        width: 270px;
        background-color: rgba(81, 72, 255, 0.2);
      }
      .hidden {
        display: none;
      }
      .picrighthid {
        width: 460px;
        height: 460px;
        float: right;
        overflow: hidden;
        position: relative;
      }
      .picrighthid .bigimg {
        position: absolute;
        width: 790px;
        height: 790px;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="pic" id="pic" onmouseover="emerge()" onmouseout="hide()" onmousemove="move(event)">
      <div class="picright" id="picright">
        <img src="image/商品详情2.jpg" >
        <div class="cover hidden" id="cover"></div>
      </div>
      <div class="picrighthid" id="picrighthid">
        <img class="bigimg" id="bigimg" src="image/商品详情2.jpg">
      </div>
    </div>
  </body>
  <script>
    function emerge() {
      let cover = document.getElementById("cover")
      let picrighthid = document.getElementById("picrighthid")
      cover.classList.remove("hidden")
      picrighthid.classList.remove("hidden")
    }
    function hide() {
      let cover = document.getElementById("cover")
      let picrighthid = document.getElementById("picrighthid")
      cover.classList.add("hidden")
      picrighthid.classList.add("hidden")
    }
    function move(event) {
      var _event = event || window.event
      var pic = document.getElementById("pic")
      var picright = document.getElementById("picright")
      var cover = document.getElementById("cover")
      var picrighthid = document.getElementById("picrighthid")
      var bigimg = document.getElementById("bigimg")
      var mul = 1.717
      
      var mouseX = _event.clientX - pic.offsetLeft - picright.offsetLeft
      var mouseY = _event.clientY - pic.offsetTop - picright.offsetTop
      if(mouseX < cover.offsetWidth / 2) {
        mouseX = cover.offsetWidth / 2
      }
      if(mouseX > picright.offsetWidth - cover.offsetWidth / 2) {
        mouseX = picright.offsetWidth - cover.offsetWidth / 2
      }
      if (mouseY < cover.offsetHeight / 2) {
        mouseY = cover.offsetHeight / 2
      }
      if (mouseY > picright.offsetHeight - cover.offsetHeight / 2) {
        mouseY = picright.offsetHeight - cover.offsetHeight / 2
      }
      bigimg.style.left = -mul*mouseX + picrighthid.offsetWidth / 2 + "px"
      bigimg.style.top = -mul*mouseY + picrighthid.offsetHeight / 2 + "px"
      
      cover.style.left = mouseX - cover.offsetWidth / 2 + "px"
      cover.style.top = mouseY - cover.offsetHeight / 2 + "px"
    }
  </script>
</html>